<script>

import Header from "../../components/HeaderVue.vue";
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import router from "../../../router/index.js";
import {getMyVideo, getRecentVideoDetail, searchVideoByTitle} from "../../../api/video/MyVideo.js";
import {ElNotification} from "element-plus";
import moment from "moment";

export default {
  name: 'MyVideo',
  components: {
    Header
  },
  setup() {
    /*-------------变量----------------*/
    // 视频数据弹窗
    let videoDetailVisible = ref(false);
    // 上传的视频数组
    let videoTable = ref([]);
    // 用户输入的查询内容
    let searchTitle = ref('');
    // 最近7天视频的收藏量和播放量
    let videoDetail = null;
    // 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
    let internalInstance = getCurrentInstance();
    let echarts = internalInstance.appContext.config.globalProperties.$echarts;
    /*-------------常规方法----------------*/
    // 跳转到上传视频页面
    function toUploadVideo() {
      router.push('/teacher/uploadVideo')
    }
    function drawEcharts() {
      // 使用moment获取最近7天日期
      let dates = [];
      for (let i = 6; i >= 0; i--) {
        dates.push(moment().subtract(i, 'days').format('MM-DD'));
      }
      let videoPlayCount = [];
      let videoCollect = [];
      for ( let i = 0 ; i < 7 ; i++) {
        videoPlayCount.push(videoDetail[0][i]);
      }
      for ( let i = 0 ; i < 7 ; i ++ ) {
        videoCollect.push(videoDetail[1][i]);
      }
      let videoPlayCountDom = document.querySelector('.video-playCount-echarts');
      let videoCollectDom = document.querySelector('.video-collect-echarts');
      const videoPlayCountEcharts = echarts.init(videoPlayCountDom);
      const videoCollectEcharts = echarts.init(videoCollectDom);
      // 视频播放量图表配置
      const videoPlayCountOption = {
        title: {
          text: '近7天视频播放量',
          left: 'center'
        },
        // 鼠标悬停显示数据
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff', // 悬浮框背景色
          borderColor: '#000', // 悬浮框边框颜色
          borderWidth: 1, // 悬浮框边框宽度
          textStyle: { // 悬浮框文字样式
            color: '#000',
            fontSize: 12
          },
        },
        xAxis: {
          type: 'category',
          data: dates
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: videoPlayCount,
            type: 'line',
            smooth: true
          }
        ]
      };
      videoPlayCountEcharts.setOption(videoPlayCountOption);
      // 视频收藏量图表配置
      const videoCollectOption = {
        title: {
          text: '近7天视频收藏量',
          left: 'center'
        },
        // 鼠标悬停显示数据
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff', // 悬浮框背景色
          borderColor: '#000', // 悬浮框边框颜色
          borderWidth: 1, // 悬浮框边框宽度
          textStyle: { // 悬浮框文字样式
            color: '#000',
            fontSize: 12
          },
        },
        xAxis: {
          type: 'category',
          data: dates
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: videoCollect,
            type: 'line',
            smooth: true
          }
        ]
      };
      videoCollectEcharts.setOption(videoCollectOption);
    }
    /*-------------请求方法----------------*/
    // 进入页面直接调用 获取当前用户上传的视频
    getMyVideo().then(res => {
      videoTable.value = res.data
    }).catch(err => {
      console.log(err)
    })
    getRecentVideoDetail().then(res => {
      videoDetail = res.data;
      console.log(res.data)
    })
    // 根据视频标题搜索视频
    function searchVideo() {
      searchVideoByTitle(searchTitle).then(res => {
        videoTable.value = res.data
        ElNotification({
          title: '提示',
          message: '搜索成功',
          type: 'success',
        })
        searchTitle.value = '';
      })
    }
    /*-------------钩子函数----------------*/
    return {
      videoDetailVisible,
      searchTitle,
      videoTable,
      toUploadVideo,
      drawEcharts,
      searchVideo,
    }
  }
}
</script>

<template>
  <div class="common-layout">
    <el-dialog
        style="width: 800px;height: 800px"
        v-model="videoDetailVisible"
        title="视频数据"
        @open="drawEcharts"
    >
      <div class="video-playCount-echarts" style="width: 100%;height: 350px"></div>
      <div class="video-collect-echarts" style="width: 100%;height: 350px"></div>
    </el-dialog>
    <el-container>
      <div class="fix-header">
        <el-header class="header-outer">
          <Header></Header>
        </el-header>
      </div>
      <el-main>
        <div class="main-box">
          <el-card class="myvideo-card">
            <div class="title">
              <el-row :gutter="24">
                <el-col :span="8" class="title-text">
                  <span>已上传视频</span>
                </el-col>
                <el-col :span="8" class="search">
                  <el-input v-model="searchTitle" placeholder="试着输入关键词吧!"></el-input>
                  <el-button type="primary" style="margin-left: 10px" @click="searchVideo">搜索</el-button>
                </el-col>
                <el-col :span="8" class="upload">
                  <el-button type="warning" style="float: right" @click="videoDetailVisible = true">数据统计</el-button>
                  <el-button type="success" style="float: right;margin-right: 10px" @click="toUploadVideo">上传视频</el-button>
                </el-col>
              </el-row>
            </div>
            <div class="table">
              <el-table :data="videoTable" style="width: 100%">
                <el-table-column prop="title" label="视频标题" width="200" />
                <el-table-column prop="cover" label="视频封面" width="150">
                  <template #default="scope" style="width: 100%;height: 100%">
                    <img :src="scope.row.cover" alt="" style="width: 100%;height: 100%"/>
                  </template>
                </el-table-column>
                <el-table-column prop="description" label="视频简介" width="300" />
                <el-table-column prop="playCount" label="播放量" width="120" />
                <el-table-column prop="collectCount" label="收藏量" width="120" />
                <el-table-column prop="createTime" label="发布日期" width="120" />
                <el-table-column prop="tag" label="标签" width="120">
                  <template #default="scope" style="display: flex;flex-direction: column">
                    <el-tag v-for="(item,index) in scope.row.tag.split(',')" :key="index">{{item}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150" >
                  <template #default>
                    <el-button type="primary" size="small">编辑</el-button>
                    <el-button type="danger" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
.common-layout {
  .fix-header {
    position: fixed;
    //top: 0;
    width: 100%;
    z-index: 900;
    box-shadow: 0 4px 8px 0 rgba(7,17,27,0.1);
    .header-outer {
      height: 100%;
      // 改变盒子背景 略灰一点
      background-color: #fff;
      // 改变外部盒子边界线便于区分
      border-bottom: 2px solid #eee;
      // 设置盒子底部阴影
      box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
    }
  }
  .main-box {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    .myvideo-card {
      margin-top: 100px;
      .title {
        width: 100%;
        .title-text {
          font-size: 20px;
          font-weight: bold;
        }
        .search {
          display: flex;
        }
        .upload {
          float: right;
        }
      }
      .table {
        margin-top: 20px;
      }
    }
  }
}
</style>